<template>
	<div>
		
				<el-table
				    :data="tableData"
				    row-key="id"
				    ref="tableRef"
				    @row-dragged="handleRowDragged"
				  >
				    <el-table-column prop="date" label="日期" width="180"></el-table-column>
				    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
				    <el-table-column prop="address" label="地址"></el-table-column>
				  </el-table>
				  
		<h1>日历行程表</h1>{{numbers}}
		 <table>
		     <tr v-for="(item, index) in numbers" :key="index" @mousedown="startDrag($event, index)">
		       <td :style="{ width: itemWidth + 'px' }" draggable="true" @dragstart="dragStart($event)" @dragover.prevent @drop="drop($event, index)">
		         {{ item }}
		       </td>
		     </tr>
		   </table>		
		<h1>测试停留下标</h1>		
		<table>
		    <tr v-for="(row, index) in rows" :key="index"  draggable="true"  @dragover.prevent @drop="handleDrop($event,index)">
		      <td>{{ row.name }}</td>
		      <td>
		        <button @dragstart="dragStart($event, index)">Drag Me</button>
		      </td>
		    </tr>
		  </table>
	</div>
</template>
 
<script>
import Sortable from 'sortablejs';// 引入 SortableJS 的样式，如果你需要的话
export default {
 
  data() {
    return {
		 draggedItemId: null, // 用于存储被拖动的按钮的行ID
		      rows: [
		        { id: 1, name: '行1' },
		        { id: 2, name: '行2' },
		        { id: 3, name: '行3' }
		      ],
		numbers: [1, 2, 3, 4, 5],
		    itemWidth: 50, // 单元格宽度，可以根据需要调整
		    dragSrcIndex: null, // 拖拽源元素的索引
		    dragging: false, // 是否正在拖拽的标志
      tableData: [{  date: '2016-05-02',  name: '王小虎',  address: '上海市普陀区金沙江路 1518 弄'}, 
			{  date: '2016-05-04',  name: '张小刚',  address: '上海市普陀区金沙江路 1517 弄'},
			{  date: '2016-05-01',  name: '李小红',  address: '上海市普陀区金沙江路 1519 弄'},
			{  date: '2016-05-03',  name: '赵小青',  address: '上海市普陀区金沙江路 1516 弄'}]
    };
  },
    mounted() {
      this.initSortable();
    },
  methods: {
		 handleDragStart(event, itemId) {
		      this.draggedItemId = itemId; // 记录被拖动的按钮的行ID
		      event.dataTransfer.effectAllowed = 'move'; // 设置拖动效果为移动
		    },
		    handleDrop(event,inde) {
				 console.log(`按钮从行${this.draggedItemId}拖动到行${inde}`);
				 
		     /* const rowId = event.target.getAttribute('data-row-id'); // 获取放置行的ID
		      if (rowId) {
		        // 处理放置逻辑，例如更新数据或执行某些操作
		        console.log(`按钮从行${this.draggedItemId}拖动到行${rowId}`);
		        // 例如，你可以在这里更新行的数据或者做一些业务逻辑处理
		      } */
		    },
		
	  startDrag(event, index) {
	        this.dragSrcIndex = index;
	        this.dragging = true;
	      },
	      dragStart(event) {
	        event.dataTransfer.setData("text", event.target.innerText);
	        event.dataTransfer.effectAllowed = 'move';
	      },
	      drop(event, dropIndex) {
	        if (this.dragSrcIndex !== dropIndex) {
	          const movedItem = this.numbers.splice(this.dragSrcIndex, 1)[0];
	          this.numbers.splice(dropIndex, 0, movedItem);
	          this.dragSrcIndex = null; // 重置拖拽源索引
	        }
	        this.dragging = false; // 停止拖拽状态
	      },
     initSortable() {
          const el = this.$refs.tableRef.$el.querySelector('.el-table__body-wrapper > table > tbody'); // 获取tbody元素
          Sortable.create(el, {
            onEnd: (evt) => {
              const { oldIndex, newIndex } = evt;
              /* const movedRow = this.tableData.splice(oldIndex, 1)[0]; // 从旧位置移除并获取该行数据
              this.tableData.splice(newIndex, 0, movedRow); // 将该行数据插入到新位置
              this.handleRowDragged(); // 可选：调用方法处理拖拽完成后的逻辑，如更新后端数据等。 */
            }
          });
        },
        handleRowDragged() {
          // 处理拖拽完成后的逻辑，例如更新后端数据等。
          console.log('Row dragged');
        }
  }
};
</script>
<style lang="scss" scoped>
.container {
  padding: 0 30px;
  background: #f1eded;
  height: 500px;
  padding-top: 30px;
}
td {
  border: 1px solid #ccc;
  text-align: center;
  cursor: move; /* 显示可拖动的光标 */
  user-select: none; /* 防止文本被选中 */
}

</style>